<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>唯品会</title>
    <link rel="stylesheet" type="" href="唯品会.css">
</head>

<body>
    <main>    
    </main>
     <!--小导航栏 /////////////////////////////////////////////  -->
        <div class="container">
            <div class="address">
                <div class="henan">河南<span class="special_0">&#9660</span></div>
                <ul class="login">
                    <li class="register_2">请登录</li>
                    <li class="register_3">注册</li>
                    <li class="register_4"><span class="gift"></span>签到有礼</li>
                    <li class="register_7">我的订单</li>
                    <li class="register_8">我的特卖<span class="sell1">&#9660</span></li>
                    <li class="register_9">会员俱乐部<span class="club1">&#9660</span></li>
                    <li class="register_10">客户服务<span class=custorm1>&#9660</span></li>
                    <li class="register_11"><span class="tel"></span>手机版</li>
                    <li class="register_12">更多<span class="more1">&#9660</span></li>
                </ul>
                <div class="clear"></div>
                <div class="address_1">
                    <span class="choice">请选择所在的收货地区</span>
                    <span class="choice2">A&nbsp&nbsp安徽&nbsp&nbsp澳门</span><br>
                    <span class="choice1">B&nbsp&nbsp北京</span><br>
                    <span class="choice1">C&nbsp&nbsp重庆</span><br>
                    <span class="choice1">F&nbsp&nbsp福建</span><br>
                    <span class="choice1">G&nbsp&nbsp广东&nbsp广西&nbsp贵州&nbsp甘肃</span><br>
                    <span class="choice1">H&nbsp&nbsp河南&nbsp河北&nbsp黑龙江&nbsp湖南&nbsp湖北&nbsp海南</span><br>
                    <span class="choice1">J&nbsp&nbsp江苏&nbsp吉林&nbsp江西</span><br>
                    <span class="choice1">L&nbsp&nbsp辽宁</span><br>
                    <span class="choice1">N&nbsp&nbsp内蒙古&nbsp宁夏</span><br>
                    <span class="choice1">Q&nbsp&nbsp青海</span><br>
                    <span class="choice1">S&nbsp&nbsp山东&nbsp山西&nbsp上海&nbsp四川&nbsp陕西</span><br>
                    <span class="choice1">T&nbsp&nbsp台湾&nbsp天津</span><br>
                    <span class="choice1">X&nbsp&nbsp西藏&nbsp香港&nbsp新疆</span><br>
                    <span class="choice1">Y&nbsp&nbsp云南</span><br>
                    <span class="choice1">Z&nbsp&nbsp浙江</span><br>
                </div>
                <div class="register_1">
                    <span class="nihao"><div class="nihao_1"></div>您好!&nbsp&nbsp[请登录]</span>
                    <span class="nihao_3">我的收藏</span>
                    <span class="nihao_3">我的订单</span>
                    <br>
                    <span class="nihao_3">零钱</span>
                    <span class="nihao_3">我的优惠券</span>
                    <br>
                    <span class="nihao_3">我的唯品币</span>
                    <span class="nihao_3">唯品金融</span>
                </div>
                <div class="register_5">
                    <div class="register_6">
                        <span class="zhu"></span>
                        <span class="day">---</span>
                        <span class="zhu"></span>
                        <span class="day">---</span>
                        <span class="zhu"></span>
                        <span class="day">---</span>
                        <span class="zhu"></span>
                        <span class="day">--</span>
                        <span class="zhu"></span>
                        <span class="day">--</span>
                        <span class="zhu"></span>
                        <span class="day">--</span>
                        <span class="zhu"></span>
                        <span class="days">1天</span>
                        <span class="days">2天</span>
                        <span class="days">3天</span>
                        <span class="days">4天</span>
                        <span class="days">5天</span>
                        <span class="days">6天</span>
                        <span class="days">7天</span>
                        <a href=""><span class="suprise">每天签到送惊喜,连续签到更享心动奖励</span></a>
                        <a href=""><span class="qiandao">签到</span></a>
                    </div>
                </div>
                <div class=sell>
                    <span>品牌收藏(0)</span><br>
                    <span>商品收藏(0)</span><br>
                    <span>我的足迹(0)</span><br>
                </div>
                <div class="club">
                    <span>俱乐部首页</span><br>
                    <span>唯品币兑换</span><br>
                    <span>免费抽大奖</span>
                </div>
                <div class="custorm">
                    <span>联系客服</span><br>
                    <span>服务中心</span><br>
                    <span>帮助中心</span><br>
                    <span>知识产权投诉</span>
                </div>
                <div class="QR">
                    <div class="QRcode"></div>
                    <div class="QR1">随时逛,及时抢</div>
                </div>
                <div class="more">
                    <span class="together">合作专区</span><br>
                    <span class="together1">联名卡申请</span>
                    <span class="together1">唯品卡</span>
                    <span class="together1">支付专区</span><br>
                    <span class="together">关于我们</span><br>
                    <span class="together1">Sell on vip</span>
                    <span class="together1">品牌招商</span>
                    <span class="together1">官方博客</span>
                </div>
            </div>
         <!--logo部分///////////////////////////////////////////  -->
            <div class="logo">
                <div class="contain"></div>
                <ul>
                    <a href=""><li class="logo1"><img class="logo1" src="logo.png" alt=""></li></a>
                    <a href=""><li class="logo2"><div class="shopping"></div><span class="shopping1">我的购物袋</span></li></a>
                    <a href=""><li class="logo2"><img class="logo3" src="goods.png" alt=""></li></a>
                    <a href=""><li class='logo2'><img class="logo3" src="sevenday.png" alt=""></li></a>
                    <a href=""><li class='logo2'><img class="logo3" src="back.png" alt=""></li></a> 
                </ul>
                <div class="tip">
                    <span>好像还未登录<a class="tip1" href="">马上登录</a>查看购物袋吧</span>
                </div>
            </div>
            <div class="clear"></div>     
             <!--大导航栏///////////////////////////////////////////////-->  
             <nav class="nav">
                 <ul class='nav1'>
                    <a href=""><li class="nav3">首页</li></a>
                    <a href=""><li class="nav2">唯品国际</li></a>
                    <a href=""><li class="nav2">母婴</li></a>
                    <a href=""><li class="nav2">家居家电</li></a>
                    <a href=""><li class="nav2">男士</li></a>
                    <a href=""><li class="nav2">美妆</li></a>
                    <a href=""><li class="nav2">生活超市</li></a>
                    <a href=""><li class="nav2">金融</li></a>
                    <a href=""><li class="nav2">更多<span>&#9660</span></li></a>
                </ul>
                <ul class="nav4">
                    <li class="nav5">
                        <div class="fenlei"></div><span class="fenlei_1">分类</span>
                    </li>
                    <li class="nav6">
                        <div class="yugao"></div><span class="yugao_1">预告</span>
                    </li>
                </ul>
            </nav>
             <!-- 轮播图 -->
       <ul>
           <div class="dbjt">
           <li class="lunbotu"><img class="lunbopicture" src="lunbo01.jpg" alt=""></li>
           <li class="lunbotu"><img class="lunbopicture" src="lunbo02.jpg" alt=""></li>
           <li class="lunbotu"><img class="lunbopicture" src="lunbo03.jpg" alt=""></li>
           <li class="lunbotu"><img class="lunbopicture" src="lunbo04.jpg" alt=""></li>
           </div>
        <div class="xiaodian">
            <li class="xiaodian1">日夜畅跑 最高2件8.8折</li>
            <li class="xiaodian1">新人专享2重礼</li>
            <li class="xiaodian1">大食惠 最高满199减100</li>
            <li class="xiaodian1">洗衣革命 最高满199减100</li>
        </div>
       </ul>
      
            
</body>
</html>
<script>
    var henan = document.querySelector(".henan");
    var address_1 = document.querySelector(".address_1");
    var special_0 = document.querySelector(".special_0");
    var register_2 = document.querySelector('.register_2');
    var register_1 = document.querySelector('.register_1');
    var register_3 = document.querySelector('.register_3');
    var register_6 = document.querySelector('.register_6');
    var register_4 = document.querySelector('.register_4');
    var register_7 = document.querySelector('.register_7');
    var register_8 = document.querySelector('.register_8');
    var sell1 = document.querySelector('.sell1');
    var sell = document.querySelector('.sell');
    var register_9 = document.querySelector('.register_9');
    var register_10 = document.querySelector('.register_10');
    var club = document.querySelector('.club');
    var club1 = document.querySelector('.club1');
    var custorm = document.querySelector('.custorm');
    var custorm1 = document.querySelector('.custorm1');
    var register_11 = document.querySelector('.register_11');
    var QR = document.querySelector('.QR');
    var register_12 = document.querySelector('.register_12');
    var more = document.querySelector('.more');
    var more1 = document.querySelector('.more1');
    var logo2 =document.querySelector('.logo2');
    var tip = document.querySelector('.tip');
    var shopping1=document.querySelector('shopping1');

    henan.onmouseover = function () {
        address_1.style.display = "block";
        henan.style.backgroundColor = "white";
        special_0.innerHTML = "&#9650";
    }
    henan.onmouseout = function () {
        address_1.style.display = "none";
        henan.style.backgroundColor = "#f5f5f5";
        special_0.innerHTML = "&#9660";
    }
    register_2.onmouseover = function () {
        register_1.style.display = "block";
        register_2.style.backgroundColor = "white";
        register_2.style.color = "red";
    }
    register_1.onmouseout = function () {
        register_1.style.display = "none";
        register_2.style.backgroundColor = "#f5f5f5";
        register_2.style.color = "black";
    }
    register_3.onmouseover = function () {
        register_3.style.color = "red";
    }
    register_3.onmouseout = function () {
        register_3.style.color = "black";
    }
    register_4.onmouseover = function () {
        register_6.style.display = "block";
        register_4.style.color = "red";
    }
    register_6.onmouseout = function () {
        register_6.style.display = "none";
        register_4.style.color = "black";
    }
    register_7.onmouseover = function () {
        register_7.style.color = "red";
    }
    register_7.onmouseout = function () {
        register_7.style.color = "black";
    }
    register_8.onmouseover = function () {
        sell.style.display = "block";
        sell1.innerHTML = "&#9650";
        register_8.style.color = "red";
        register_8.style.backgroundColor = "white"
    }
    register_8.onmouseout = function () {
        sell.style.display = "none";
        sell1.innerHTML = "&#9660";
        register_8.style.color = "black";
        register_8.style.backgroundColor = "#f5f5f5";
    }
    register_9.onmouseover = function () {
        club.style.display = "block";
        register_9.style.color = "red";
        club1.innerHTML = "&#9650";
        register_8.style.backgroundColor = "white"
    }
    club.onmouseout = function () {
        club.style.display = "none";
        register_9.style.color = "black";
        club1.innerHTML = "&#9660";
        register_8.style.backgroundColor = "#f5f5f5"
    }
    register_10.onmouseover = function () {
        custorm.style.display = "block";
        register_10.style.color = "red";
        custorm1.innerHTML = "&#9650";
        register_10.style.backgroundColor = "white"
    }
    custorm.onmouseout = function () {
        custorm.style.display = "none";
        register_10.style.color = "black";
        custorm1.innerHTML = "&#9660";
        register_10.style.backgroundColor = "#f5f5f5"
    }
    register_11.onmouseover = function () {
        QR.style.display = "block";
        register_11.style.color = "red";
    }
    register_11.onmouseout = function () {
        QR.style.display = "none";
        register_11.style.color = "black";
    }
    register_12.onmouseover = function () {
        more.style.display = "block";
        register_12.style.color = "red";
        more1.innerHTML = "&#9650";
    }
    more.onmouseout = function () {
        more.style.display = "none";
        register_12.style.color = "black";
        more1.innerHTML = "&#9660";
    }
    logo2.onmouseover = function(){
        tip.style.display='block';
        logo2.style.backgroundColor="#f5f5f5";
    }
    logo2.onmouseout = function(){
        tip.style.display="none";
        logo2.style.backgroundColor="white";
        shopping1.style.backgroundColor="white";
    }

</script>